@model  iPick.Models.Application

@{
	Layout = "~/Views/Shared/_Layout.cshtml";
}
 
<script type="text/javascript">
	$(document).ready(function () {
		//Rating Bar
		$('.movie_rating').ratingbar({
			maxRating: 10,
			showText: false
		});
	});
</script>
<div id="main_content">
	<div id="movies">
	@foreach (iPick.Catalog catalog in Model.lCatalog)
 {
		<div id="movieContent">
			<div id="frame">
			<a href="/Home/IndexDetails/@catalog.CatalogId" data-transition="slide"  class="ui-link-inherit">
		<article>
			<figure class="float">
				<p><img src="@catalog.PosterMedium" alt="@catalog.Title" /></p>
			</figure>
			<header>
				<h2><a href="/Home/IndexDetails/@catalog.CatalogId">@Html.Label(catalog.Title)</a></h2>
				</header>
				<p id="shortDescription">@catalog.Description.Substring(0,100)...</p>
				<footer>
				<p><span>Release Year:</span><time datetime="@Html.Label(catalog.ReleaseYear.ToString())" reldate>@Html.Label(catalog.ReleaseYear.ToString())</time></p>
				<p><span>Rated:</span> @Html.Label(catalog.MPAA_Rating)</p>
				<p><span>Viewer Rating:</span> <span class="movie_rating">@Html.Label(catalog.ViewerRating)</span></p>
				</footer>
		</article>
			</a>
			</div>
		</div>
	 
 }
	</div>
	<div class="push">
	</div>
	<!-- movie divs -->
</div>
